<template>
	<view>
		<cu-custom bgColor="text-156" :isBack="true">
			<block slot="content">运维月报</block>
			<!-- <view slot="right" style="display: flex;">
				<view style="margin-right: 20upx;" @click="showDrawer">
					<uni-icons type="search" size="20"></uni-icons>
				</view>
			</view> -->
		</cu-custom>
		<!-- <SearchOnlyTimeBar style="position: relative;top: 0;"/> -->
		<!-- <view class="draw-panel">
			<view class="drawer-form">
				<view class="drawer-form-item">
					<view class="drawer-label"><text>开始时间</text></view>
					<view class="drawer-content">
						<TimeSelector
							ref="stime"
							class="ipt-ctl"
							showType="yearToMonth"
							@btnConfirm="(e)=>dateChange(e,'startTime')" 
						>
							<text v-if="query.startTime">{{query.startTime}}</text>
							<text v-else style="color: grey;">请选择时间</text>
						</TimeSelector>
					</view>
				</view>
			</view>
		</view> -->
		<view class="content padding" style="margin-top: 20upx;">
			<view v-for="(item,idx) in dataList" :key="idx">
				<view class="charts-item" >
					<view class="chart-top" />
					<view class="chart-title"><text class="text">{{item.time}}</text></view>
					<canvas :canvas-id="'canvasColumn'+idx" :id="'canvasColumn'+idx" class="charts" @touchstart="touchColumn"></canvas>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchOnlyTimeBar from '../components/SearchOnlyTimeBar.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	
	var canvaColumn = null
	var _self;
	
	export default {
		components:{
			SearchOnlyTimeBar,
			uniIcons,
			uniLoadMore,
			TimeSelector,
		},
		data() {
			return {
				reload: false,
				listData: [],
				last_id: '',
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				dept: '',
				companyName: '',
				cWidth:'',	
				cHeight:'',
				pixelRatio:1,
				serverData: null,
				query:{
					queryType: 'MONTH',
					startTime: ''
				},
				dataList:[],
				dataColumn:[],
			}
		},
		onLoad() {
			this.getList();
			
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		},
		methods: {
			dateChange(res,type){
				this.query[type] = res.key
			},
			getList(){
				this.$api.request('/statistics/countSatisfactionByMaintenance2',{
					method: 'get',
					data: this.query
				}).then(res=>{
					if(res.success){
						this.dataList = res.data.list
						this.dataColumn = res.data.column.filter(item=> item !== '')
						this.getServerData();
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			getServerData(){
				
				for(var i=0;i<this.dataList.length;i++){
					const obj = this.dataList[i]
					const data = this.dataColumn.map(item=>{
						return obj[item] || 0;
					})
					const json = {
						"Column": {
						  "categories": this.dataColumn,
						  "series": [{
							"name": this.dataList[i].time,
							"data": data
						  }]
						},
					}
					let Column= {categories:[],series:[]};
					Column.categories = json.Column.categories;
					Column.series = json.Column.series;
					console.log(Column)
					this.showColumn("canvasColumn"+i,Column,  20);
				}
			},
			showColumn(canvasId,chartData, max){
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					padding:[30,30,10,20],
					legend:{show:false},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						// disableGrid:true,
						min: 0,
						max: max,
						format: val => {return val.toFixed(0)}
					},
					dataLabel: true,
					width: 360,
					height: 250,
					extra: {
						column: {
							type:'group',
							width: 20
						}
					  }
				});
			},
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.charts-item{
		border-radius: 10upx;
		background: #fff;
		margin-bottom: 20upx;
		.chart-top{
			height: 20upx;
			background-color: #156dac;
			border-radius: 10upx 10upx 0 0 ;
		}
		.chart-title{
			padding-top: 20upx;
			padding-left: 20upx;
			.text{
				color: #156dac;
				border-left: 10upx solid #156DAC;
				padding-left: 10upx;
			}
			
		}
		.charts{
			width: 100%; height:500upx;background-color: #FFFFFF;
		}
	}
	
	.page-content-list{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		.content-list-cell{
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	.order-item{
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.order-item-content{
			margin-top: 30upx;
			.order-content-row{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;
				.order-btn{
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}
				.label{
					flex: 0 0 200upx;
					color: #5A5A5A;
					text-align: left;
					font-size: 26upx;
				}
				.value{
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
					&.text-left{
						text-align: left;
						padding-left: 20upx;
					}
				}
			}
			
		}
			
		.order-item-header{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 10upx;
			}
			text{
				color: #333;
				font-size: 26upx;
				&.green{
					color:#2AD51D;
				}
			}
			
		}
	}
</style>
